<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="120px">
            
           <el-row>
            <el-col :span="10">
            <el-form-item label="开始时间">
        
            <el-date-picker
            v-model="form.start"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
       
      </el-form-item>
     </el-col>
     <el-col :span="10">
      <el-form-item label="截止时间">
         
          <el-date-picker
            type="date"
            placeholder="截止时间"
            v-model="form.end"
            style="width: 100%"/>
       
      </el-form-item> </el-col>
           </el-row>
                <el-form-item>
                    <el-input placeholder="根据姓名和身份证号查询" v-model="nameOrCard" style="width:300px"></el-input>
                    &emsp;<el-button 
                        icon="el-icon-search"
                        type="primary"
                        plain>查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-row style="display: flex;">
                        <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5;">
                        <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                            <div>未选列表</div>
                            <!-- <span style="float: right;">{{ listArr.length }}</span> -->
                            <vxe-table :data="listArr" style="width: 100%;" border height="393" 
                            @checkbox-all="checkAll"
                            @checkbox-change="checkAll">
                                <vxe-column type="checkbox" width="60"></vxe-column>
                                <vxe-column field="name" title="姓名" width="100"></vxe-column>
                                <vxe-column field="age" title="工作单位及职务"></vxe-column>
                            </vxe-table>
                           
                        </div>
                        </el-col>
                        <el-col :span="3" style="width: 80px; padding: 0 10px; display: flex; flex-direction: column; justify-content: center; ">
                            <!--穿梭框选中-->
                            <div style="display: flex; justify-content: center;">
                                <el-button class="middle-circle" icon="el-icon-arrow-right" :disabled="!leftData.length" size="mini" type="primary" @click="handelSelect" />
                            </div>
                            <!--穿梭框取消-->
                            <div style="display: flex; justify-content: center;">
                                <el-button class="middle-circle" icon="el-icon-arrow-left" :disabled="!rightData.length" size="mini" type="primary" style="margin-top: 10px; margin-left: 0px;" @click="handleRemoveSelect" />
                            </div>
                        </el-col>
                        <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5;">
                        <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                            <div>已选列表</div>
                            <!-- <span style="float: right;">{{ selectArr.length }}</span> -->
                            <vxe-table :data="selectArr" style="width: 100%;" border height="393" @checkbox-all="checkRightAll"
                            @checkbox-change="checkRightAll">
                                <vxe-column type="checkbox" width="60"></vxe-column>
                                <vxe-column field="name" title="姓名" width="100"></vxe-column>
                                <vxe-column field="age" title="工作单位及职务"></vxe-column>
                            </vxe-table>
                        </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="查看原因事由">
                    <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="form.textarea">
                    </el-input>
                </el-form-item>

           
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onsubmit">提 交</el-button>
        </span>
    </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: true,
        form:{
            start:"",
        end:"",
            textarea:"",
        },
        
        nameOrCard:"",
        searchParam: {},
        listArr: [
            { id: 1, name: "AAA", age: 1 },
            { id: 2, name: "BBB", age: 1 },
            { id: 3, name: "CCC", age: 1 },
            { id: 4, name: "DDD", age: 1 },
            { id: 5, name: "EEE", age: 1 },
            { id: 6, name: "FFF", age: 1 },
        ],
        selectArr: [],
        changeArr: [],
        leftData: [], // 左边选中列表数据
        rightData: [], // 右边选中列表数据
        leftList:[],
      };
    },
    methods: {
      init(){
         this.dialogVisible = true;
      },
      handleClose(done) {
        done();
      },
      checkAll({ checked, records }) {
         this.leftData = records;
      },
      checkRightAll({ checked, records }) {
        this.rightData = records;
      },
        // 穿梭框选中
     handelSelect() {
        for (let i = 0; i < this.selectArr.length; i++) {
            for (let j = 0; j < this.leftData.length; j++) {
            if (this.leftData[j].id === this.selectArr[i].id) {
                this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
            }
            }
        }
        console.log(this.selectArr,this.leftData,"left");
        this.leftList = this.leftData
        this.selectArr = this.handleConcatArr(this.selectArr, this.leftData);
        this.handleRemoveTabList(this.leftData, this.listArr);
        this.leftData = [];
        },
        onsubmit(){
            console.log(this.leftList,"data")
        },
        // 穿梭框取消
        handleRemoveSelect() {
        this.listArr = this.handleConcatArr(this.listArr, this.rightData);
        this.handleRemoveTabList(this.rightData, this.selectArr);
        this.rightData = [];
        },
        handleConcatArr(selectArr, leftData) {
        let arr = [];
        arr = arr.concat(selectArr, leftData);
        return arr;
        },
        handleRemoveTabList(isNeedArr, originalArr) {
        if (isNeedArr.length && originalArr.length) {
            for (let i = 0; i < isNeedArr.length; i++) {
            for (let k = 0; k < originalArr.length; k++) {
                if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
                originalArr.splice(k, 1);
                }
            }
            }
        }
        },
    }
  };
</script>

<style>

</style>